<template>
  <div>
    <div class="title">
      <div>{{ detail.title }}</div>
      <div>{{ detail.label }}</div>
      <div>
        <span>135236</span>人喜欢 <span>{{ detail.evaluate }}</span>条评论
      </div>
    </div>
    <div class="content">
      <div class="img"><img :src="detail.pic" alt=""></div>
      <div>{{ detail.slogo }}</div>
      <div class="star">评分：
      <span v-for="item of detail.star" :key="item.id">
        <img v-if="item >= 1.5" src="../../assets/icon/star.png" alt="" />
        <img
          v-else-if="item >= 0.5"
          src="../../assets/icon/ban.png"
          alt=""
        />
        <img v-else src="../../assets/icon/none-star.png" alt="" /> </span
      >{{ detail.rating }}
    </div>
      <div>类型：{{ detail.type }}</div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      detail: {},
    };
  },
  mounted() {
    // console.log(this.$route.params);
    var { id } = this.$route.params;
    this.$http(`http://47.108.197.28:4000/api/movieDetail?id=${id}`).then(
      (res) => {
        res.data.res.forEach((detail) => {
          var { raiting, labels, rating } = detail;
          detail.star = rating
            ? this.handleStar(rating)
            : this.handleStar(raiting);
          detail.rating = rating ? rating : raiting;
          detail.label = labels.slice(0, 2).reverse().join(".");
          detail.type = labels.slice(2, 3).join("、");
        });
        this.detail = res.data.res[0];
      }
    );
  },
  methods: {
    handleStar(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num).toFixed(2));
        } else {
          arr.push(0);
        }
        num -= 2;
      }
      return arr;
    },
  },
};
</script>

<style scoped>
.title{
  background:linear-gradient(to right, #c77b6b, #1a1416,#c6a7a4,#c77b6b) ;
  color: #f0e4e3;
  overflow: hidden;
}
.title>div:nth-child(1){
  font-size: 40px;
}
.title>div:nth-child(3){
  color: gray;
  margin-bottom: 30px;
 
}
.title>div:nth-child(3) span{
  color: #db4a5d;
  padding-right: 20px;
}
.title>div:nth-child(3) span:nth-child(2){
  padding-left: 30px;
}
.title>div{
  padding: 25px 0 25px 30px;
}
.content{
  position: relative;
  padding-left: 40px;
}
.content>div:nth-child(1) img{
  width: 200px;
  height: 260px;
  position: absolute;
  top: -160px;
  right: 30px;
}
.content>div:nth-child(2){
  color: #5c5c5c;
  font-weight: 600;
  padding: 50px 0;
}
.content>div:nth-child(3) img{
  width: 30px;
  height: 30px;
}
.content>div:nth-child(4){
  padding: 15px 50px 60px 0;
  border-bottom:2px solid  #e2e2e2;
}
</style>